<template>
  <i
    :class="icon"
    @click.stop="click"
    @mouseover="iconColor=hoverColor"
    @mouseout="iconColor=color"
    :style="{color: iconColor, backgroundColor}"></i>
</template>

<script>
export default {
  props: {
    icon: null,
    backgroundColor: null,
    hoverColor: null,
    color: null,
  },
  data() {
    return {
      iconColor: '#999'
    }
  },
  methods: {
    click () {
      this.$emit('click')
    }
  }
}
</script>

<style>

</style>